<template>
  <div class="NewContactInformation">
    <div class="header">
      <div class="header-1">
        <div class="tuo">
          <div class="tuo-1">
            <div class="tuo-2"></div>
            <span>联系方式列表</span>
          </div>
          <div class="tuo-3">
            <el-button
              @click="addcontactList"
              size="mini"
              style="
                width: 96px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              "
              >新增</el-button
            >
          </div>
        </div>
        <!-- 新增联系方式 -->
        <el-dialog
          :title="title"
          :visible.sync="addcontact"
          :before-close="handleClose"
          width="40%"
        >
          <el-form
            size="mini"
            :inline="true"
            :model="addpassengers"
            :rules="addrules"
            ref="addpassengers"
            class="add_gers"
          >
            <el-form-item
              label="联系类型"
              prop="contactInformationType"
              label-width="100px"
            >
              <el-select
                v-model="addpassengers.contactInformationType"
                placeholder="请选择" clearable
              >
                <el-option
                  v-for="item in fangshi"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="联系方式"
              prop="contactInformationName"
              label-width="100px"
            >
              <el-input
                v-model="addpassengers.contactInformationName"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="说明"
              prop="contactInformationNameIllustrate"
              label-width="100px"
            >
              <el-input
                type="textarea"
                v-model="addpassengers.contactInformationNameIllustrate"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="getbackInsertConnect('addpassengers')"
                size="mini"
                >确定
              </el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 订单列表 -->
        <div class="table">
          <el-table
            border
            size="mini"
            ref="contact"
            :data="MembershipInformationData.contactInformations"
            :header-cell-style="{
              color: '#fff',
              background: '#6090EC',
              fontSize: '11px',
              fontWeight: 'normal',
            }"
            :row-style="{ height: '40px' }"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              prop="contactInformationType"
              label="类型"
              width="120"
            >
              <template slot-scope="scope">
                <template v-if="scope.row.contactInformationType == 'e-mail'"
                  >电子邮箱</template
                >
                <template v-if="scope.row.contactInformationType == 'phone'"
                  >电话</template
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="contactInformationName"
              label="联系方式"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="contactInformationNameIllustrate"
              label="说明"
            >
            </el-table-column>
            <el-table-column prop="name" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  style="background-color: #6090ec; color: #fff"
                  size="mini"
                  @click="btnModify(scope.row)"
                  >修改</el-button
                >
                <el-button
                  @click="Deletephone(scope.row)"
                  style="background-color: #ff0000; color: #fff"
                  size="mini"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 删除 -->
      <el-dialog
        title="确认删除该联系方式吗"
        :visible.sync="Deletep"
        :before-close="handleClose"
        width="50%"
      >
        <div class="pop-3">
          <el-button
            type="primary"
            @click="getbackDeleteConnect"
            size="mini"
            style="width: 110px; font-size: 10px; color: #fff; height: 30px"
            >确定
          </el-button>
        </div>
      </el-dialog>
      <!-- 修改 -->
      <el-dialog
        :title="title"
        :visible.sync="editcontact"
        :before-close="handleClose"
        width="50%"
      >
        <div class="header-1">
          <div class="too-1-1">
            <div class="too"></div>
            <span v-if="title == '会员信息查询-新增联系方式'"
              >新增联系方式</span
            >
            <span v-if="title == '会员信息查询-修改联系方式'"
              >修改联系方式</span
            >
          </div>
        </div>
        <el-form
          size="mini"
          :inline="true"
          :model="addpassengers"
          :rules="addrules"
          class="add_gers"
        >
          <el-form-item
            label="联系类型"
            prop="contactInformationType"
            label-width="100px"
          >
            <el-select
              v-model="addpassengers.contactInformationType"
              placeholder="请选择" clearable
            >
              <el-option
                v-for="item in fangshi"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="联系方式"
            prop="contactInformationName"
            label-width="100px"
          >
            <el-input v-model="addpassengers.contactInformationName"></el-input>
          </el-form-item>
          <el-form-item
            label="说明"
            prop="contactInformationNameIllustrate"
            label-width="100px"
          >
            <el-input
              type="textarea"
              v-model="addpassengers.contactInformationNameIllustrate"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="getbackUpdateConnectById('addpassengers')"
              size="mini"
              >确定
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "NewContactInformation",
  // 父子传递参数
  props: ["MembershipInformationData"],
  data() {
    return {
      addcontact: false,
      // 方式
      value: "",
      Edit: {},
      title: "会员信息查询-修改联系方式",
      contactInformationId: 0,
      fangshi: [
        {
          value: "phone",
          label: "手机",
        },
        {
          value: "e-mail",
          label: "电子邮箱",
        },
      ],
      addpassengers: {
        contactInformationType: "",
        contactInformationName: "",
        contactInformationNameIllustrate: "",
      },
      // 新增联系方式验证
      addrules: {
        contactInformationType: [
          { required: true, message: "请选择联系类型", trigger: "change" },
        ],
        contactInformationName: [
          { required: true, message: "请输入联系方式", trigger: "change" },
        ],
        contactInformationNameIllustrate: [
          { required: true, message: "请备注说明", trigger: "change" },
        ],
      },

      // 修改
      way: {
        contactInformationId: "",
        contactInformationType: "",
        contactInformationName: "",
        contactInformationNameIllustrate: "",
      },
      contact: [],
      dialogVisible: false,
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        checked: true,
      },
      editcontact: false,
      Deletep: false,
      radio: 3,
      checked: false,
      sizeForm: {
        name: "",
        region: "",
      },
    };
  },
  methods: {
    // 查询联系方式
    getbackConnect() {
      this.$axios
        .getbackConnect({
          customerId: this.MembershipInformationData.customerId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            // 工单列表数据
            this.contact = res.data;
            console.log(this.contact);
          }
        });
    },
    Deletephone(row) {
      this.Deletep = true;
      this.contactInformationId = row.contactInformationId;
      console.log(this.contactInformationId);
    },
    // 获取当前id
    btnModify(row) {
      console.log(row);
      this.way = row;
      this.getbackUpdateConnect(row.contactInformationId);
      this.contactInformationId = row.contactInformationId;
    },
    // 查询待修改的联系方式
    getbackUpdateConnect(id) {
      console.log(id);
      this.$axios
        .getbackUpdateConnect({
          contactInformationId: id,
        })
        .then((res) => {
          if (res.code == "200") {
            console.log(res);
            this.addpassengers = res.data;
            this.editcontact = true;
          }
        });
    },
    // 修改联系方式
    getbackUpdateConnectById() {
      this.title = "会员信息查询-修改联系方式";
      this.editcontact = false;
      this.$axios
        .getbackUpdateConnectById({
          contactInformationId: this.contactInformationId,
          contactInformationType: this.addpassengers.contactInformationType,
          contactInformationName: this.addpassengers.contactInformationName,
          contactInformationNameIllustrate:
            this.addpassengers.contactInformationNameIllustrate,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.editcontact = false;
            this.getbackConnect();
            this.getqueryCustomer()
            // this.$refs[formName].resetFields();
            // this.getFatherMethod
          } else {
            this.$confirm("修改失败请核对信息", "提示", {
              confirmButtonText: "确定",
              type: "warning",
            });
          }
        });
    },
    // 删除联系方式
    getbackDeleteConnect() {
      console.log(this.contactInformationId);
      this.Deletep = false;
      this.$axios
        .getbackDeleteConnect({
          contactInformationId: this.contactInformationId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
             this.getqueryCustomer()
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getbackConnect();
          } else {
            this.$confirm("删除失败请核对信息", "提示", {
              confirmButtonText: "确定",
              type: "warning",
            });
          }
        });
    },
    handleClose() {
      this.editcontact = false;
      this.addcontact = false;
      this.Deletep = false;
    },
    // 新增联系方式
    addcontactList() {
      this.title = "会员信息查询-新增联系方式";
      this.addcontact = true;
    },
     // 查
      getqueryCustomer() {   
      
        this.$axios
          .getqueryCustomera({
            phone: this.MembershipInformationData.contractPhoneOne,
          })
          .then((res) => {
            if (res.code == "200") {
              this.MembershipInformationData = res.data
            }  
          });
      
    },
    getbackInsertConnect(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addcontact = false;
          this.$axios
            .getbackInsertConnect({
              contactInformationType: this.addpassengers.contactInformationType,
              contactInformationName: this.addpassengers.contactInformationName,
              contactInformationNameIllustrate:
                this.addpassengers.contactInformationNameIllustrate,
              customerId: this.MembershipInformationData.customerId,
            })
            .then((res) => {
              console.log(res);
              if (res.code == "200") {
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
                this.save()
                 this.getqueryCustomer()
                this.addcontact = false;
                this.$refs[formName].resetFields();
                this.getbackConnect();
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    save(){
                this.$emit('save');
            },
    onSubmit() {
      console.log("submit!");
    },
    handleChange(value) {
      console.log(value);
    },
  },
  mounted() {
    // this.getbackConnect();
  },
};
</script>
<style scoped>
.NewContactInformation {
  height: 100vh;
  background-color: #f7f7f7;
}
.tuo {
  font-weight: bolder;
  display: flex;
  margin-left: 20px;
  padding-top: 20px;
  justify-content: space-between;
  margin-right: 20px;
}
.tuo-1 {
  display: flex;
}
.tuo-2 {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}
.too-1-1 {
  display: flex;
  margin-left: 20px;
  font-size: 20px;
}
.too {
  width: 3.5px;
  height: 22px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  margin-bottom: 25px;
}
.add_gers {
  display: flex;
  flex-direction: column;
}
.table {
  margin-left: 20px;
  margin-right: 20px;
}

#selectForm >>> .el-form-item__label {
  font-size: 11px;
}
.pop-3 {
  margin-left: 10px;
  margin-top: 40px;
}
</style>
